<template>
  <div class="articlesItem-container">

    <div class="articles-header">
      <h5>{{articles_TYPE[articlesInfo].name}}</h5>
    </div>

    <div v-if="!items.length"
         class="noData-tip">
      数据为空~
    </div>

    <div v-for="item in items" :key="item.id" class="article-item">
        <!-- 标题 -->
        <div class="article-info">{{ item.title}}</div>
        <div class="news-info">
          <span class="info-author">{{item.author}}</span>
        </div>
        <!-- 短评内容 -->
        <div class="article-content" v-html="item.content"></div>
        <!-- 点赞人数 -->
        <div class="articleLiked" @click="addLiked(item.liked,item.id)"><i class="el-icon-apple"></i> {{item.liked}}点赞</div>
    </div>

    <div class="articles-page">
        <el-pagination
            background
            :page-size = 6
            @current-change = "handleCurrentChange"
            layout="total, prev, pager, next, jumper"
            :total="totalCount">
        </el-pagination>
    </div>

  </div>

</template>

<script>
  import axios from 'axios'
  //用articles_TYPE来选择商品分类标题 与 商品分类列表
  //通过name选择 标题
  //通过id  选择 列表
  const articles_TYPE = {
    movieWorld:{
      name:'影迷世界',
      id:'movieWorld',
    },
    musicWorld:{
      name:'乐迷世界',
      id:'musicWorld',
    },
    bookWorld:{
      name:'书迷世界',
      id:'bookWorld',
    }
  }
export default {
    name:'articlesItem',
    data() {
        return {
            items:[],//数据列表数组 
            articles_TYPE,//
            totalCount:0,//数据列表的总数
            filterForm:{
                type:'',//商品分类的type---articles_TYPE[articlesinfo].id---相关联
                Page:1,//默认打开在第一页
                pageSize:6,//一页有6条articles
            },
            isLiked:false
        };
    },
    computed:{
        //路由设置
        articlesInfo(){
            //分割字符串 route.path '/'
            const paths = this.$route.path.split('/');
            //'/'后面的字符串
            return paths[paths.length - 1];
        },
    },
    //监听数据列表
    watch:{
        articlesInfo(articleVal){
            this.filterForm.type = this.articles_TYPE[articleVal].id;
            this.getArticlesList()
        }
    },
    //渲染
    mounted(){
      this.getArticlesList();
    },
    methods:{
      getArticlesList(){
          this.filterForm.type = this.articles_TYPE[this.articlesInfo].id;
          axios.post('/api/getArticlesList',{...this.filterForm}).then(res =>{
            this.items = res.data;
            this.totalCount = res.data.length;
          })
      },
      //传入短评的id与该短评的原点赞数
      addLiked(liked,id){
          //未登录的状态
          if(!this.$store.state.isLogin){
              this.$message({
                  message: '请登录后再点赞！！',
                  type: 'warning',
              });
          }else{
              liked = liked + 1;
              axios.post('/api/addLiked',{
                  //发送短评的id
                  likedNum:liked,
                  id:id
              }).then(res =>{
                  console.log(res)
                  this.$message({
                      message: '点赞成功！',
                      type: 'success',
                  });
              })
              this.getArticlesList()
          }
      },
      //跳转到某个页码
      handleCurrentChange(val){
        //将当前页码 赋值 到filterForm
        this.filterForm.page = val;
        //再渲染当前页码的数据
        this.getarticlesList();
      }
    }
}
</script>

<style lang = "scss" scoped>
     .articlesItem-container{
       padding: 20px 15%;
       width: 70%;
       .articles-header{
         border-bottom: 1px solid #ddd;
         h5{
           margin: 10px 0;
           height: 20px;
           line-height: 20px;
           font-size: 17px;
         }
       }
       .noData-tip{
         text-align: center;
         margin-top: 30px;
         font-size: 14px;
         color: #c2c2c2;
         min-height: 200px;
       }
       .article-item{
         margin-top: 15px;
         border-bottom: 1px solid #e0dada;
         padding: 10px 0 30px;
         .article-info{
           /* cursor: pointer; */
           color: #212121;
           font-weight: 500;
           font-size: 20px;
           margin: 10px 0;
           overflow: hidden;
           text-overflow:ellipsis;
           white-space: nowrap;
         }
         .article-content{
           color: #888;
           font-size: 15px;
           margin: 5px 0;
           display: -webkit-box;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 2;
           overflow: hidden;
           line-height: 1.5;
           max-height: 60px;
         }
         .articleLiked{
           cursor: pointer;
           margin-top: 5px;
           float: right;
           display: inline-block;
           color: #888;
           font-size: 13px;
           
         }
       }
       .articles-page{
         margin: 30px 0;
         text-align: center;
       }
     }
</style>